<template>
  <div style="background:white;height:100%;padding:20px">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="电话号码">
              <a-input v-model="queryParam.mobile" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="订单状态">
              <a-select v-model="queryParam.status" placeholder="请选择" >
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">审核成功</a-select-option>
                <a-select-option value="0">审核中</a-select-option>
                <a-select-option value="2">审核失败</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSelect">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="display:flex;flex-direction:row;">
      <a-button type="primary">短信批量发送</a-button>
      <a-button type="primary" style="margin-left:10px">订单状态一键审批</a-button>
      <a-button type="primary" style="margin-left:10px" @click="sxEvent">刷新</a-button>
      <a-button type="primary" style="margin-left:10px" @click="deteleListEvent">批量删除</a-button>
    </div>

    <a-table @change="pageShow" :pagination="pagination" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="cgmxTable" size="small" rowKey="key" :columns="columns" :dataSource="userData" :loading="tableLoading" style="margin-top:10px">
      <template slot="action" slot-scope="text, record">
        <a-button type="primary" @click="gkEvent(record.id)">改款</a-button>
        <a-button type="primary" @click="shEvent(record.id,1)" style="margin-left:10px" v-if="record.statusId==0">审核通过</a-button>
        <a-button type="primary" @click="shnoEvent(record.id,2)" style="margin-left:10px" v-if="record.statusId==0">审核不通过</a-button>
      </template>
      <template slot="statusId" slot-scope="text, record">
         <a style="color:#11C754" v-if="record.statusId==0">审核中</a>
        <a style="color:black" v-if="record.statusId==1">审核成功</a>
        <a style="color:red" v-if="record.statusId==2">审核失败</a>
      </template>
      
    </a-table>

    <a-modal title="改款" :visible="mimavisible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-input placeholder="请输入改款金额" v-model="price" style="margin:20px;width:170px" />
    </a-modal>

    <a-modal title="借款" :visible="jkvisible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-input placeholder="请输入最低金额" v-model="info.lowPrice" style="margin:20px;width:170px" />
      <a-input placeholder="请输入期限" v-model="info.months" style="margin:20px;width:170px" />
      <a-input placeholder="请输入借款金额" v-model="info.price" style="margin:20px;width:170px" />
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import { getRoleList, getServiceList } from '@/api/manage'
import { loanList, modifyMoeny, loanLog, deteleLoanLogs,loanLogsFunction} from '@/api/loanApi'
export default {
  name: 'TableList',
  inject: ['reload'],
  components: {
    STable,
  },
  data() {
    return {
      jkvisible: false,
      mimavisible: false,
      confirmLoading: false,
      price: '',
      id: '',
      tableLoading: false,
      mdl: {},
      info: {},

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        mobile:"",state:""
      },
      // 表头
      data: [],
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 15,
      mobile:"",
      state:"",
      userData: [],
      deteleList: [],
      columns: [
        {
          title: '订单号',
          dataIndex: 'no',
          align: 'center',
        },
        {
          title: '用户名',
          dataIndex: 'mobile',
          align: 'center',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '借款金额',
          dataIndex: 'price',
          align: 'center',
        },
        {
          title: '借款期限',
          dataIndex: 'months',
          align: 'center',
        },
        {
          title: '每期还款',
          dataIndex: 'lowPrice',
          align: 'center',
        },
        {
          title: '提现次数',
          dataIndex: 'getNum',
          align: 'center',
        },
        {
          title: '截图',
          dataIndex: 'bankUrl',
          align: 'center',
        },
        {
          title: '订单状态',
          dataIndex: 'statusId',
          align: 'center',scopedSlots: { customRender: 'statusId' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: [{ no: '1' }],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  created() {},
  mounted() {
    this.loanFunction()
  },
  methods: {
  
   //审核 
   shEvent(id,status){
      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认要通过审核吗?',
        onOk: () => {
          if (clickNum == 0) {
            clickNum = 1
            loanLogsFunction(status,id)
              .then((response) => {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作成功',
                    duration: 3,
                  })
                 
                 this.loanFunction()
                } else {
                  let type = 'error'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作失败',
                    duration: 3,
                  })
                 
                this.loanFunction()
                }
              })
              .catch((error) => {})
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
   
   },
    shnoEvent(id,status){
      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认不通过审核吗?',
        onOk: () => {
          if (clickNum == 0) {
            clickNum = 1
            loanLogsFunction(status,id)
              .then((response) => {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作成功',
                    duration: 3,
                  })
                 
                 this.loanFunction()
                } else {
                  let type = 'error'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作失败',
                    duration: 3,
                  })
                 
                 this.loanFunction()
                }
              })
              .catch((error) => {})
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
   
   },
    //批量删除
    deteleListEvent() {
      // let strify = JSON.stringify(this.deteleList)
      let arr = this.deteleList.join(',')
      // console.log("222",arr)
      // let arrParse = JSON.parse(strify);
      // console.log("删除列表",arrParse)

      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认要删除吗?',
        onOk: () => {
          if (clickNum == 0) {
            clickNum = 1
            deteleLoanLogs(arr)
              .then((response) => {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '删除成功',
                    duration: 3,
                  })
                 
                  this.reload()
                } else {
                  let type = 'error'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作失败',
                    duration: 3,
                  })
                 
                  this.reload()
                }
              })
              .catch((error) => {})
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
    },
    //查询
    onSelect(){
     this.state =this.queryParam.status
     this.mobile =this.queryParam.mobile
   
     this.loanFunction()
    },
    //筛选
    onSelectChange(selectedRowKeys, selectedRows) {
      let arr = this.userData
      this.selectedRowKeys = selectedRowKeys
      let rowsArr = selectedRows
      this.deteleList = []
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < rowsArr.length; j++) {
          if (arr[i].id == rowsArr[j].id) {
            this.deteleList.push(arr[i].id)
          }
        }
      }
    },
    gkEvent(id) {
      this.id = id
      this.mimavisible = true
    },
    handleCancel() {
      this.mimavisible = false
      this.jkvisible = false
    },
    handleOk(e) {
      this.confirmLoading = true
      // this.ModalText = 'The modal will be closed after two seconds';
      modifyMoeny(this.id, this.price)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功',
              duration: 3,
            })

            this.loanFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作失败',
              duration: 3,
            })

            this.loanFunction()
          }
        })
        .catch((error) => {
          this.confirmLoading = true
          setTimeout(() => {
            this.mimavisible = false
            this.confirmLoading = false
          }, 2000)
        })
    },

    loanFunction() {
      this.tableLoading = true
      loanList(this.current, this.pageSize,this.mobile,this.state)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize   
          this.pagination = pagination
          this.userData = response.data.records
          this.pagination.current = response.data.current

          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },

    pageShow(pagination) {
      loanList(pagination.current, pagination.pageSize,this.mobile,this.state)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.userData = response.data.records
          this.pagination.current = response.data.current
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //刷新
    sxEvent(){
      this.reload()
    }
  },
}
</script>
<style scoped>
.laytop {
  display: flex;
  flex-direction: row;
}
</style>
